﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- <link rel="stylesheet" href="../static/css/InjectionSale.css"> -->

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/InjectionSale.css" media="only screen and (max-height:1600px) ">
    <!-- 手机App -->
    <link rel="stylesheet" href="../static/css/InjectionSaleApp.css" media="only screen and (min-height:1600px) ">

</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header" style="padding-top: 25px; ">
            <header>
                <div class="navbar">
                    <div class="card A" >
                        <ul class="header-text">
                            <li>
                                <h8 style="line-height: 78px;">销售看板</h8>
                            </li>
                        </ul>
                    </div>
                    <div class="pc_content">
                        <div class="card B">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>客户</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="cardCustomerCount">
                                        {{CustomerCount}}家
                                    </h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width: 13rem; background: #33814e;margin-left: 2rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>本月订单</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="cardCurrentMonthOrderAmt">{{CurrentMonthOrderAmt}}万元</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width: 13rem; background: #33814e;margin-left: 2rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>本年订单</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="cardCurrentYearOrderAmt">{{CurrentYearOrderAmt}}万元</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card" style="width:13rem; background:#33814e;margin-left: 2rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>同期增长率</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="cardLastMonthOrderAmtGrowthRate">{{LastMonthOrderAmtGrowthRate}}%</h3>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="body_div">
            <div class="main-left">
                <div class="border-container3">
                    <div class="name-title">
                        订单额同比
                    </div>
                    <div>
                        <div id="chartDeliveryAmtYOY"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
                <div class="border-container3">
                    <div class="name-title">
                        本年客户排名（前10）
                    </div>
                    <div>
                        <el-table id="tableCustomerDeliveryAmtRank" :data="CustomerDeliveryAmtRank" :default-sort="{prop: 'ID', order: 'ascending'}" stripe="true" ref="CustomerDeliveryAmtRank" :height=el_table_height4 :cell-style="{padding:3+'px'}">
                            <el-table-column type="index" width="50" label="序号">
                            </el-table-column>
                            <el-table-column prop="ClientCode" align="center" label="客户">
                            </el-table-column>
                            <el-table-column align="center" label="占比">
                                <template slot-scope="dataItem">
                                    <div v-html="renderCustomerDeliveryPercent(dataItem)">
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>

            <div class="center">
                <div class="border-container3">
                    <div class="name-title">
                        本年订单走势
                    </div>
                    <div>
                        <div id="chartCurrentYearOrderTrend" style="width: 100%;height: 467px;"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container3">
                    <div class="name-title">
                        送货计划与送货出库
                    </div>
                    <div>
                        <div id="chartCurrentYearDeliveryTrend" style="height: 430px; width: 100%;"></div>
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>

            <div class="main-right">
                <div class="border-container4">
                    <div class="name-title">
                        客户销售送货（前5）
                    </div>
                    <div class="border-container1">
                        <div>
                            <div id="chartCurrentYearVIPCustomer1" style="width: 100%;height: 168px;"></div>
                        </div>
                        <span class="top-left border-span"></span>
                        <span class="top-right border-span"></span>
                        <span class="bottom-left border-span"></span>
                        <span class="bottom-right border-span"></span>
                    </div>
                    <div class="border-container1">
                        <div>
                            <div id="chartCurrentYearVIPCustomer2" style="width: 100%;height: 168px;"></div>
                        </div>
                        <span class="top-left border-span"></span>
                        <span class="top-right border-span"></span>
                        <span class="bottom-left border-span"></span>
                        <span class="bottom-right border-span"></span>
                    </div>
                    <div class="border-container1">
                        <div>
                            <div id="chartCurrentYearVIPCustomer3" style="width: 100%;height: 168px;"></div>
                        </div>
                        <span class="top-left border-span"></span>
                        <span class="top-right border-span"></span>
                        <span class="bottom-left border-span"></span>
                        <span class="bottom-right border-span"></span>
                    </div>
                    <div class="border-container1">
                        <div>
                            <div id="chartCurrentYearVIPCustomer4" style="width: 100%;height: 168px;"></div>
                        </div>
                        <span class="top-left border-span"></span>
                        <span class="top-right border-span"></span>
                        <span class="bottom-left border-span"></span>
                        <span class="bottom-right border-span"></span>
                    </div>
                    <div class="border-container1">
                        <div>
                            <div id="chartCurrentYearVIPCustomer5" style="width: 100%;height: 168px;"></div>
                        </div>
                        <span class="top-left border-span"></span>
                        <span class="top-right border-span"></span>
                        <span class="bottom-left border-span"></span>
                        <span class="bottom-right border-span"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    CustomerCount: 0,
                    CurrentMonthOrderAmt: 0,
                    CurrentYearOrderAmt: 0,
                    LastMonthOrderAmtGrowthRate: 0,
                    CustomerDeliveryAmtRank: [],
                    el_table_height4: 500,
                    chartDeliveryAmtYOY: null
                }
            },
            methods: {
                GetData(that) {
                    //客户数
                    GetCodeData("VB21101415505771", "Get", "value").then(function(res) {
                            //$('#CustomerCount').text("" + res.rows[0].RowsCount + "家")
                            that.CustomerCount = res.rows[0].RowsCount;
                        }),
                        //本月订单
                        GetCodeData("VB21101415522881", "Get", "value").then(function(res) {
                            //$('#cardCurrentMonthOrderAmt').text("" + res.rows[0].TaxAmtOrd + "万元")
                            that.CurrentMonthOrderAmt = res.rows[0].TaxAmtOrd;
                        }),
                        //本年订单
                        GetCodeData("VB21101415534266", "Get", "value").then(function(res) {
                            //$('#cardCurrentYearOrderAmt').text("" + res.rows[0].TaxAmtOrd + "万元")
                            that.CurrentYearOrderAmt = res.rows[0].TaxAmtOrd;
                        }),
                        //上月同比增长率
                        GetCodeData("VB21101416491664", "Get", "value").then(function(res) {
                            //$('#cardLastMonthOrderAmtGrowthRate').text("" + res.rows[0].LastMonthOrderAmtYOY + "%")
                            that.LastMonthOrderAmtGrowthRate = res.rows[0].LastMonthOrderAmtYOY;
                        }),
                        // 营业额同比（截止上月）
                        GetCodeData("VB21101416560491", "Get", "value").then(function(res) {
                            //echarts柱状图
                            var chartDom = document.getElementById('chartDeliveryAmtYOY');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData = []; //系列数据

                            if (res.rows != null && res.rows.length > 0) {
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryYear"]);
                                    seriesData.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }
                            var option = {
                                xAxis: {
                                    type: 'category',
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: seriesData,
                                    type: 'bar',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: { //数值样式
                                            color: 'white'
                                        },
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        }
                                    }
                                }]
                            };

                            myChart.setOption(option);
                        }),
                        //本年客户排名（前10）
                        GetCodeData("VB21101416564661", "Get", "value").then(function(res) {
                            //element-ui table
                            that.CustomerDeliveryAmtRank = res.rows;

                        }),
                        //本年订单走势
                        GetCodeData("VB21101416572694", "Get", "value").then(function(res) {
                            //echarts折线图
                            var chartDom = document.getElementById('chartCurrentYearOrderTrend');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData = []; //系列数据

                            if (res.rows != null && res.rows.length > 0) {
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["OrdMonthDigit"]);
                                    seriesData.push(res.rows[i]["TaxAmtOrd"]);
                                }
                            }

                            var option = {
                                xAxis: {
                                    type: 'category',
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: seriesData,
                                    type: 'line',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: { //数值样式
                                            color: 'white'
                                        },
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        }
                                    }
                                }]
                            };

                            myChart.setOption(option);
                        }),
                        //送货计划与送货出库
                        GetCodeData("VB21101416581575", "Get", "value").then(function(res) {
                            //echarts柱状图
                            var chartDom = document.getElementById('chartCurrentYearDeliveryTrend');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData_Plan = []; //系列数据(送货计划)
                            var seriesData_Delivery = []; //系列数据(送货)

                            if (res.rows != null && res.rows.length > 0) {
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryMonthDigit"]);
                                    seriesData_Plan.push(res.rows[i]["TaxAmtPlan"]);
                                    seriesData_Delivery.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }

                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow',
                                        label: {
                                            show: true
                                        }
                                    }
                                },
                                calculable: true,
                                legend: {
                                    data: ['送货计划', '送货出库'],
                                    itemGap: 5,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                grid: {
                                    top: '12%',
                                    left: '1%',
                                    right: '10%',
                                    containLabel: true
                                },
                                xAxis: [{
                                    type: 'category',
                                    data: xAxisData
                                }],
                                yAxis: [{
                                    type: 'value',
                                    name: '金额(万元)',
                                    axisLabel: {
                                        formatter: function(a) {
                                            a = +a;
                                            return isFinite(a) ? echarts.format.addCommas(+a / 1000) : '';
                                        }
                                    }
                                }],
                                series: [{
                                    name: '送货计划',
                                    type: 'bar',
                                    data: seriesData_Plan,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: { //数值样式
                                            color: 'white'
                                        },
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        }
                                    }
                                }, {
                                    name: '送货出库',
                                    type: 'bar',
                                    data: seriesData_Delivery,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: { //数值样式
                                            color: 'white'
                                        },
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        }
                                    }
                                }]
                            };
                            myChart.setOption(option);
                        }),
                        // 客户销售送货排名第1名
                        GetCodeData("VB21101416594878", "Get", "value").then(function(res) {
                            //echarts折线图双线
                            var chartDom = document.getElementById('chartCurrentYearVIPCustomer1');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData_Plan = []; //系列数据(订单)
                            var seriesData_Delivery = []; //系列数据(送货)
                            var chartTitle = "NO.1 客户:";

                            if (res.rows != null && res.rows.length > 0) {
                                chartTitle = chartTitle + res.rows[0]["ClientCode"];
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryMonthDigit"]);
                                    seriesData_Plan.push(res.rows[i]["TaxAmtPlan"]);
                                    seriesData_Delivery.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }

                            var option = {
                                title: {
                                    text: chartTitle,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['订单', '送货'],
                                    x: 'right',
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '订单',
                                    type: 'line',
                                    data: seriesData_Plan
                                }, {
                                    name: '送货',
                                    type: 'line',
                                    data: seriesData_Delivery
                                }]
                            };
                            myChart.setOption(option);
                        }),
                        // 客户销售送货排名第2名
                        GetCodeData("VB21101417002048", "Get", "value").then(function(res) {
                            //echarts折线图双线
                            var chartDom = document.getElementById('chartCurrentYearVIPCustomer2');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData_Plan = []; //系列数据(送货计划)
                            var seriesData_Delivery = []; //系列数据(送货)
                            var chartTitle = "NO.2 客户:";

                            if (res.rows != null && res.rows.length > 0) {
                                chartTitle = chartTitle + res.rows[0]["ClientCode"];
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryMonthDigit"]);
                                    seriesData_Plan.push(res.rows[i]["TaxAmtPlan"]);
                                    seriesData_Delivery.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }

                            var option = {
                                title: {
                                    text: chartTitle,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['订单', '送货'],
                                    x: 'right',
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '订单',
                                    type: 'line',
                                    data: seriesData_Plan
                                }, {
                                    name: '送货',
                                    type: 'line',
                                    data: seriesData_Delivery
                                }]
                            };

                            myChart.setOption(option);
                        }),
                        // 客户销售送货排名第3名
                        GetCodeData("VB21101417004553", "Get", "value").then(function(res) {
                            //echarts折线图双线
                            var chartDom = document.getElementById('chartCurrentYearVIPCustomer3');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData_Plan = []; //系列数据(送货计划)
                            var seriesData_Delivery = []; //系列数据(送货)
                            var chartTitle = "NO.3 客户:";

                            if (res.rows != null && res.rows.length > 0) {
                                chartTitle = chartTitle + res.rows[0]["ClientCode"];
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryMonthDigit"]);
                                    seriesData_Plan.push(res.rows[i]["TaxAmtPlan"]);
                                    seriesData_Delivery.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }

                            var option = {
                                title: {
                                    text: chartTitle,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['订单', '送货'],
                                    x: 'right',
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '订单',
                                    type: 'line',
                                    data: seriesData_Plan
                                }, {
                                    name: '送货',
                                    type: 'line',
                                    data: seriesData_Delivery
                                }]
                            };

                            myChart.setOption(option);
                        }),
                        // 客户销售送货排名第4名
                        GetCodeData("VB21101417011695", "Get", "value").then(function(res) {
                            //echarts折线图双线
                            var chartDom = document.getElementById('chartCurrentYearVIPCustomer4');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData_Plan = []; //系列数据(送货计划)
                            var seriesData_Delivery = []; //系列数据(送货)
                            var chartTitle = "NO.4 客户:";

                            if (res.rows != null && res.rows.length > 0) {
                                chartTitle = chartTitle + res.rows[0]["ClientCode"];
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryMonthDigit"]);
                                    seriesData_Plan.push(res.rows[i]["TaxAmtPlan"]);
                                    seriesData_Delivery.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }

                            var option = {
                                title: {
                                    text: chartTitle,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['订单', '送货'],
                                    x: 'right',
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '订单',
                                    type: 'line',
                                    data: seriesData_Plan
                                }, {
                                    name: '送货',
                                    type: 'line',
                                    data: seriesData_Delivery
                                }]
                            };

                            myChart.setOption(option);
                        }),
                        // 客户销售送货排名第5名
                        GetCodeData("VB21101417014134", "Get", "value").then(function(res) {
                            //echarts折线图双线
                            var chartDom = document.getElementById('chartCurrentYearVIPCustomer5');
                            var myChart = echarts.init(chartDom);
                            var xAxisData = []; //X轴数据
                            var seriesData_Plan = []; //系列数据(送货计划)
                            var seriesData_Delivery = []; //系列数据(送货)
                            var chartTitle = "NO.5 客户:";

                            if (res.rows != null && res.rows.length > 0) {
                                chartTitle = chartTitle + res.rows[0]["ClientCode"];
                                for (var i = 0; i < res.rows.length; i++) {
                                    xAxisData.push(res.rows[i]["DeliveryMonthDigit"]);
                                    seriesData_Plan.push(res.rows[i]["TaxAmtPlan"]);
                                    seriesData_Delivery.push(res.rows[i]["TaxAmtDelivery"]);
                                }
                            }

                            var option = {
                                title: {
                                    text: chartTitle,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['订单', '送货'],
                                    x: 'right',
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '订单',
                                    type: 'line',
                                    data: seriesData_Plan
                                }, {
                                    name: '送货',
                                    type: 'line',
                                    data: seriesData_Delivery
                                }]
                            };

                            myChart.setOption(option);
                        })

                },
                //客户送货金额占比
                renderCustomerDeliveryPercent(dataItem) {
                    let _html = "";
                    if (dataItem) {
                        _html += "<div>"
                        var _width1 = 100;
                        var _color = "";
                        _width1 = dataItem.row.TaxAmtDeliveryPercent;
                        if (_width1 > 100) {
                            _width1 = 100;
                        }
                        if (dataItem.row.TaxAmtDeliveryPercent < 100) {
                            _color = "#00a000";
                        } else if (dataItem.row.TaxAmtDeliveryPercent >= 100) {
                            _color = "#FF0000";
                        } else {
                            _color = "#008000";
                        }

                        _html += ("<div  style='position: relative; width:160px;padding: 0px;background:#4199fe;overflow: hidden;height:27px;border: 1px solid #95b8e7;'><div style='width: " + _width1 + "%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:black;'>" + dataItem.row.TaxAmtDeliveryPercent + "%" + "</div>" +
                            "</div>" +
                            "");
                        return _html;
                    }
                },
            },

            mounted() {
                TableAotoRoll([this.$refs.CustomerDeliveryAmtRank]);
                var that = this;
                setTimeout(function() {
                    that.GetData(that);
                }, 0);
                setInterval(function() {
                    that.GetData(that)
                }, 1000 * 60);
            }
        })
    </script>
</body>





</html>